<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="ch">
<head>
    <meta charset="UTF-8">
    <title>新闻界面</title>
    <script src="/echarts/echarts.min.js"></script>
    <style>
        .pie-style {
            margin: 0 auto;
            width: 800px;
            height: 600px;
        }
    </style>
</head>
<body>
<div>
    <form>
        <input type="text" name="title">
        <button>提交</button>
    </form>

    <ul>
        <li th:each="item:${list}">
            <a target="_blank" th:href="${item.url}" th:text="${item.title}"></a>
        </li>
    </ul>
</div>
<hr/>
<div>
    <div id="main" style="float: left; width: 600px;height:400px;"></div>
    <div id="line" style="float: left; width: 600px;height:400px;"></div>
<!--
        1、 引入echarts依赖
        2、 在界面创建一块区域
        3、 通过echarts.init创建echarts实例
        4、 去官网找对应图的配置
        5、 将配置添加到echarts实例里
-->
    <div style="clear: both"></div>
    <div id="pie" class="pie-style"></div>

    <script type="text/javascript" th:inline="javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        var categoryCount = [[${categoryCount}]];
        var categoryList = []
        var categoryNumList = []
        for (var item of categoryCount) {
            categoryList.push(item.category);
            categoryNumList.push(item.num);
        }

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '新闻分类'
            },
            tooltip: {},
            legend: {
                data: ['新闻量']
            },
            xAxis: {
                data:categoryList
            },
            yAxis: {},
            series: [{
                name: '新闻量',
                type: 'bar',
                data: categoryNumList
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

        // 基于准备好的dom，初始化echarts实例
        var lineChart = echarts.init(document.getElementById('line'));

        var dateCount = [[${dateCount}]];
        var dateList = [];
        var dateNumList = [];
        for (var item of dateCount) {
            dateList.unshift(item.date)
            dateNumList.unshift(item.num)
        }

        // 指定图表的配置项和数据
        var lineOption = {
            xAxis: {
                type: 'category',
                data: dateList
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: dateNumList,
                type: 'line'
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        lineChart.setOption(lineOption);


        // 基于准备好的dom，初始化echarts实例
        var pieChart = echarts.init(document.getElementById('pie'));
        var pieList = [];
        // {category:"新浪体育" , num:10}
        // {value: 40, name: 'rose 1'},
        for (let item of categoryCount) {
            pieList.push({
                name:item.category,
                value:item.num
            })
        }

        // 指定图表的配置项和数据
        var pieOption = {
            legend: {
                top: 'bottom'
            },
            toolbox: {
                show: true,
                feature: {
                    mark: {show: true},
                    dataView: {show: true, readOnly: false},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            series: [
                {
                    name: '面积模式',
                    type: 'pie',
                    radius: [50, 100],
                    center: ['50%', '50%'],
                    // roseType: 'area',
                    // itemStyle: {
                    //     borderRadius: 8
                    // },
                    data: pieList
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        pieChart.setOption(pieOption);
    </script>

</div>
</body>
</html>